---
id: js-styling
slug: js-styling
hide_title: true
sidebar_label: Js Styling
title: Js Styling
description: A Simple React popup component.Use it as a tooltip,modal,sub-menu and match more ...
---

# js Styling

To style Popup Component using js styling, we provide `contentStyle`, `overlayStyle`, `arrowStyle` props to make your work easy.

```jsx
const contentStyle = { background: '#000' };
const overlayStyle = { background: 'rgba(0,0,0,0.5)' };
const arrowStyle = { color: '#000' }; // style for an svg element

const Modal = () => (
  <Popup
    trigger={<button className="button"> Open Modal </button>}
    {...{ modal, closeOnDocumentClick, contentStyle, overlayStyle, arrowStyle }}
  >
    <span> Modal content </span>
  </Popup>
);
```
